<!--
 * @Date: 2019-11-06 10:43:32
 * @LastEditors: peng qiao
 * @LastEditTime: 2020-03-24 17:51:55
 -->
<template>
  <div class="work_station" id='exit'>
    <van-nav-bar title="社区服务" fixed />
    <div style="width:100%;height:15px"></div>
    <div class="workstation_sub_title">物业服务</div>
    <van-grid
      :gutter="10"
      :border="false"
      :column-num="4"
      class="work_station_list"
    >
      <van-grid-item
        v-for="item in propertyServiceList"
        :key="item.app_name"
        @click="integralClick(item)"
      >
        <svg-icon
          :icon-class="item.icon"
          widthW="1.3rem"
          heightH="1.3rem"
        ></svg-icon>
        <span class="function_text">{{ item.app_name }}</span>
      </van-grid-item>
    </van-grid>
    <!-- <div class="workstation_sub_title">社区生活</div>
    <van-grid
      :gutter="10"
      :border="false"
      :column-num="4"
      class="work_station_list"
    >
      <van-grid-item
        v-for="item in communityLifeList"
        :key="item.app_name"
        @click="integralClick(item)"
      >
        <svg-icon
          :icon-class="item.icon"
          widthW="1.3rem"
          heightH="1.3rem"
        ></svg-icon>
        <span class="function_text">{{ item.app_name }}</span>
      </van-grid-item>
    </van-grid> -->
    <div class="workstation_sub_title">公共服务</div>
    <van-grid
      :gutter="10"
      :border="false"
      :column-num="4"
      class="work_station_list"
    >
      <van-grid-item
        v-for="item in publicServiceList"
        :key="item.app_name"
        @click="integralClick(item)"
      >
        <svg-icon
          :icon-class="item.icon"
          widthW="1.3rem"
          heightH="1.3rem"
        ></svg-icon>
        <span class="function_text">{{ item.app_name }}</span>
      </van-grid-item>
    </van-grid>
    <div class="workstation_sub_title">生活服务</div>
    <van-grid
      :gutter="10"
      :border="false"
      :column-num="4"
      class="work_station_list"
    >
      <van-grid-item
        v-for="item in lifeList"
        :key="item.app_name"
        @click="integralClick(item)"
      >
        <svg-icon
          :icon-class="item.icon"
          widthW="1.3rem"
          heightH="1.3rem"
        ></svg-icon>
        <span class="function_text">{{ item.app_name }}</span>
      </van-grid-item>
    </van-grid>
    <div class="workstation_sub_title">特色服务</div>
    <van-grid :gutter="10" :border="false" :column-num="4">
      <van-grid-item
        v-for="item in specialServiceList"
        :key="item.id"
        @click="integralClick(item)"
      >
        <!-- <svg-icon :icon-class="item.icon" widthW="1.3rem" heightH="1.3rem"></svg-icon> -->
        <van-image
          :src="item.icon"
          style="width:1.3rem;height:1.3rem;border-radius:50%;"
        ></van-image>
        <span class="function_text">{{ item.app_name }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import constant from "@/controller/constant.js";
import mine from "@/controller/mine.js";
export default {
  data() {
    return {
      propertyServiceList: [],
      lifeList: [],
      specialServiceList: [],
      communityLifeList: [],
      publicServiceList: []
    };
  },
  mounted() {
    this.getSpecialService();
    const appList = constant.appList;
    appList.forEach(e => {
      if (e.app_category === 1) {
        this.propertyServiceList.push(e);
      } else if (e.app_category === 2) {
        this.communityLifeList.push(e);
      } else if (e.app_category === 3) {
        this.publicServiceList.push(e);
      } else if (e.app_category === 4) {
        this.lifeList.push(e);
      } else if (e.app_category === 5) {
        this.specialServiceList.push(e);
      }
    });
  },
  methods: {
    getSpecialService() {
      mine.spServiceItem_v1_list_frontEnd().then(res => {
        if (res.code == "0") {
          res.datas.forEach(item => {
            let data = {
              id: item.serviceEntity.id,
              app_name: item.serviceEntity.serviceName,
              appUrl: item.serviceEntity.description,
              icon: item.serviceEntity.serviceImage,
              path: "/work/specialService/school",
              app_category: 5,
              data: item
            };
            this.specialServiceList.push(data);
          });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    integralClick(val) {
      if (val.app_category == 5) {
        localStorage.setItem("specialService", JSON.stringify(val));
      }
      if (
        val.app_name == "生活缴费" ||
        val.app_name == "社区活动" ||
        val.app_name == "投票选举" ||
        val.app_name == "快递服务" ||
        val.app_name == "周边商家" ||
        val.app_name == "党群服务" ||
        val.app_name == '生活服务' ||
        val.app_name == '社区积分'
      ) {
        this.$toast("正在开发中,敬请期待。。。");
        return;
      } else {
        this.$router.push({
          path: val.path
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../workstation/styles/workstation.scss";
/deep/.van-image__img, /deep/.van-image__error, /deep/.van-image__loading{
  border-radius: 50%;
}
</style>
